<template>
  <div class="app-container">
    <div class="head-container">
      <el-input v-model="questionDesc" clearable placeholder="题目名称" maxlength="10" style="width: 200px;" class="filter-item"
        @keyup.enter.native="init" />
      <el-select  v-model="optionType" class="filter-item"  style="width: 200px;" clearable filterable placeholder="题目类型">
        <el-option v-for="item in dicts" :key="item.id" :label="item.label" :value="item.value-0">
        </el-option>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getDatas">搜索</el-button>
      <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="addQus()">新增
      </el-button>
      <div class="el-dialog-div">
        <Qsform :bank-id="id"  :is-add="isAdd" @setForm="setForm" @cancelAdd="cancelAdd" v-if="!isAdd"/>
        <Qslist ref="qsList" v-for="(item, index) in data" :index="index + 1" :item="item" :key="index"
          @del="delList(index)" @editForm="editForm" @addForm="addForm" />
       <!-- <div class="add-btn" @click="addQus()" style="margin-top: 5px;" v-if="isAdd">添加题目</div> -->
        <!--  <Qsform :bank-id="id"  @setForm="setForm" @cancelAdd="cancelAdd" v-else /> -->
        <!-- <div slot="footer" class="btn-box">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="save()" :loading="submiting">保存</el-button>
        </div> -->
      </div>
     <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
  import {
    queList,
    addQuestion
  } from '@/api/business/questionBank'
  import Qslist from './components/Qslist'
  import Qsform from './components/Qsform'
  import initDict from '@/mixins/initDict'
  import initData from '@/mixins/initData'

  export default {
    mixins: [initDict,initData],
    components: {
      Qslist,
      Qsform
    },
    data() {
      return {
        dialog: false,
        loading: false,
        submiting: false,
        isAdd: true, //添加题目按钮的显示与否
        list: [], //已经添加好的试题数据
        //Lists: [],
        id: this.$route.query.id,
        optionType:"",
        questionDesc:"",
        type:"",
        data:[]
      }
    },
    watch: {
      data(value) {
        this.data = value
      }
    },
    created() {
      this.$nextTick(() => {
        this.getDict('question_type')
        this.init()
      })
    },
    methods: {
      beforeInit() {
        if (this.id) {
          this.url = 'question/que-List'
          this.params = {
            bankId: this.id,
            questionDesc:this.questionDesc,
            optionType:this.optionType,
            page: this.page,
            size: this.size
          }
          return true
        }else{
          this.data=[];
        }
      },
      getDatas(){
        this.data=[];
        this.toQuery()
      },
      // init() {
      //   if (this.id) {
      //     this.loading = true
      //     this.data=[];
      //     queList({
      //         bankId: this.id,
      //         questionDesc:this.questionDesc,
      //         optionType:this.optionType,
      //         page: this.page,
      //         size: this.size
      //       })
      //       .then(res => {
      //         this.Lists = res.content || []
      //       })
      //       .catch(err => {
      //         this.$message.error(err.message)
      //         console.error(err)
      //       })
      //       .finally(() => {
      //         this.loading = false
      //       })
      //   }
      // },
      cancelAdd() {
        this.isAdd = true
      },
      save() {
        if (this.data.length === 0) {
          this.$message.error('请添加题目信息')
          return
        }
        this.submiting = true
        let data = this.data
        data.map(r => {
          if (r.lists && r.lists.length) {
            if (r.questionImg) r.questionImg = JSON.stringify(r.questionImg)
            r.lists.map(q => {
              if (q.answerImg) q.answerImg = JSON.stringify(q.answerImg)
            })
          }
        })
        // return
        this.data = data
        // return
        addQuestion({
            lists: this.data
          })
          .then(res => {
            this.$message.success('保存成功')
            this.cancel()
          })
          .catch(err => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      },
      delList(index) {
        this.data[index].isDelete = 1
      },
      setForm(form) {
        this.data.push(form)
        this.isAdd = true
      },
      addQus() {
        this.isAdd = false
      },
      handleOk() {
        if (this.submiting) {
          return
        }
        this.submiting = true
      },
      handleCancel() {
        this.isAdd = true
      },
      cancel() {
        this.$router.go(-1)
      },
      editForm(json) {
        this.data.splice(json.index, 1, json.form)
      },
      addForm(json) {
        this.data.splice(json.index, 0, json.form)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-dialog-div {
    // height: 80vh;
    // overflow-x: hidden;
    padding-left: 5px;
  }

  .container {
    padding: 30px;
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .add-btn {
    display: flex;
    height: 80px;
    background-color: #eeeeee;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    border: dashed 1px #aaa;
    color: #aaa;
    cursor: pointer;
  }

  .add-btn:hover {
    border: dashed 1px #b02027;
    color: #b02027;
  }
</style>
